<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="button" value="按钮1" v-on:click="fn1()">
    <input type="button" value="按钮2" @click="fn2()">
    <p>{{info}}</p>
    <!--change是值改变事件  -->
    <select v-model="info" @change="changefn()">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</div>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v = new Vue({
        el:"div",
        data:{
            info:"文本测试"
        },
        methods:{
            fn1:function () {
                v.info="abc";
            },
            fn2:function () {
                /*代表当前的Vue对象*/
                this.info="xyz";
            },
            changefn:function () {
                alert("值改变了")
            }
        }
    })

</script>
</body>
</html>